<html>
<head>
  <meta charset='UTF-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1' />
  <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
  <title>The offical example rewritten with org/ox-spectacle</title>


<!-- scripts -->

<script src='https://unpkg.com/react@18.1.0/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom@18.1.0/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-is@18.1.0/umd/react-is.production.min.js'></script>
<script src='https://unpkg.com/prop-types@15.7.2/prop-types.min.js'></script>
<script src='https://unpkg.com/spectacle@^9/dist/spectacle.min.js'></script>
<script src='https://unpkg.com/htm'></script>

<!-- styles -->

<style>

.codepane {}
.split-container {
  display: flex; flex-flow: column nowrap; justify-content: flex-start;
  align-items: stretch; height: inherit; max-height: 100vh;
}
::-webkit-scrollbar { width: 5px; height: 80%; }
::-webkit-scrollbar-track { background: rgb(179, 177, 177); border-radius: 5px; }
::-webkit-scrollbar-thumb { background: rgb(136, 136, 136); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover  { background: rgb(100, 100, 100); border-radius: 5px; }
::-webkit-scrollbar-thumb:active { background: rgb(68, 68, 68); border-radius: 5px; }

/* extra css catch from the org file */

@keyframes beat { to { transform: scale(1.4) } }
.anibox { animation: beat .5s infinite alternate; transform-origin: center; }

.my-warning {
    color: orange;
    text-align: center;
    text-shadow: 1px 1px 5px black;
    margin-top: 2em;
}
.my-warning::before {
    color: red;
    content: "WARNING: ";
}

</style>

</head>

<body>
  <div id="root"></div>
  <script type='module'>

    /* imports */

    const { Deck, Slide, SlideContext, SlideLayout, Box, FlexBox, Grid, Heading, Text, Link, Image, FullSizeImage, SpectacleLogo, UnorderedList, OrderedList, ListItem, Table, TableCell, TableRow, TableHeader, TableBody, CodePane, CodeSpan, Quote, Markdown, MarkdownSlideSet, MarkdownSlide, MarkdownPreHelper, Appear, Stepper, SpectacleTheme, SpectacleThemeOverrides, CommandBar, FullScreen, Progress, AnimatedProgress, Notes } = Spectacle;
    const { defaultTheme, fadeTransition, slideTransition, defaultTransition, useSteps, useMousetrap, mdxComponentMap, indentNormalizer, removeNotes, isolateNotes } = Spectacle;
    const html = htm.bind(React.createElement);

    /* other components */

    const MyLink = React.forwardRef((props, ref) => {
       // TODO: location not refresh... why?
       const id = props.id;
       if (/\d+/.test(id)) {
           const { skipTo } = React.useContext(Spectacle.DeckContext);
           return html`<${Link} ref=${ref} onClick=${() => {event.preventDefault();skipTo({slideIndex: id})}} ...${props}></${Link}>`;
       }
       return html`<${Link} ...${props} ref=${ref}></${Link}>`;
    });

    /* template */

    let template = ({ slideNumber, numberOfSlides }) => html`
      <${FlexBox} position='absolute' bottom=${0} right=${0} opacity=${0.3}>
        <${Progress} size=${8} />
        <${Text} fontSize=${15}>${slideNumber}/${numberOfSlides}</${Text}>
      </${FlexBox}>`;

    /* user templates defined in org file */

let tp1 = ({ slideNumber, numberOfSlides }) => html`

<${FlexBox} justifyContent="space-between" position="absolute" bottom=${0} width=${1}>
  <${Box} padding="0 1em">
    <${FullScreen} />
  </${Box}>
  <${Box} padding="1em">
    <${AnimatedProgress} />
  </${Box}>
</${FlexBox}>
`;

    /* user scripts defined in org file */

// Notice: react-htm syntax
const renderSomeBoxes = (n) =>
      Array(n).fill('').map((_, index) => html`
        <${FlexBox} paddingTop=${0} key=${`formidable-logo-${index}`} flex=${1}>
          <${Image} src=${formidableLogo} width=${100} />
        </${FlexBox}>`);

const theme1 = {
  fonts: {
    header: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
    text: '"Open Sans Condensed", Helvetica, Arial, sans-serif'
  }
};

const ts1 = {
    from: {
        transform: 'scale(0.5) rotate(45deg)',
        opacity: 0
    },
    enter: {
        transform: 'scale(1) rotate(0)',
        opacity: 1
    },
    leave: {
        transform: 'scale(0.2) rotate(315deg)',
        opacity: 0
    }
}

const formidableLogo = 'https://avatars2.githubusercontent.com/u/5078602?s=280&v=4';

const SlideWithTitle = (props) => html`<${Slide} ...${props}><${Heading}>${props.title}</${Heading}>${props.children}</${Slide}>`;
const Grid2x2 = (props) => html`<${Grid} ...${props}, gridTemplateRows="50% 50%", gridTemplateColumns="50% 50%" height="100%"></${Grid}>`;
const BoxCenter = (props) => html`<${FlexBox} ...${props}, alignItems="center", justifyContent="center"></${FlexBox}>`;


    /* presentation definition begin */

    const Presentation = () => html`<${Deck} theme=${theme1} template=${tp1}>

<!------ slide (1) begin ------>

<${Slide}>
<${FlexBox} height="100%">

<${SpectacleLogo} size=${500} />
</${FlexBox}>

<${Notes}>
<${Text}>Spectacle supports notes per slide.
<ol>
  <li>Notes can now be HTML markup!</li>
  <li>Lists can make it easier to make points.</li>
</ol></${Text}>
</${Notes}>
</${Slide}>


<!------ slide (2) begin ------>

<${Slide}>
<${FlexBox} height="100%" flexDirection="column"><${Heading} margin="0px" fontSize="150px">✨<i>Spectacle</i> ✨</${Heading}>

<${Heading} margin="0px" fontSize="h2">A ReactJS Presentation Library</${Heading}>

<${Heading} margin="0px 32px" fontSize="h3" color="primary">Where you can write your decks in JSX, Markdown, or MDX!</${Heading}>
 </${FlexBox}></${Slide}>


<!------ slide (3) begin ------>

<${SlideWithTitle} title="Custom Backgrounds" num=${[3]} transition=${ts1} backgroundColor="tertiary" backgroundImage="url(https://github.com/FormidableLabs/dogs/blob/main/src/beau.jpg?raw=true)" backgroundOpacity=${0.5}>
<${UnorderedList}>
<${ListItem}><${CodeSpan}>${`backgroundColor`}</${CodeSpan}></${ListItem}>
<${ListItem}><${CodeSpan}>${`backgroundImage`}</${CodeSpan}></${ListItem}>
<${ListItem}><${CodeSpan}>${`backgroundOpacity`}</${CodeSpan}></${ListItem}>
<${ListItem}><${CodeSpan}>${`backgroundSize`}</${CodeSpan}></${ListItem}>
<${ListItem}><${CodeSpan}>${`backgroundPosition`}</${CodeSpan}></${ListItem}>
<${ListItem}><${CodeSpan}>${`backgroundRepeat`}</${CodeSpan}></${ListItem}>
</${UnorderedList}>
</${SlideWithTitle}>


<!------ slide (4) begin ------>

<${SlideWithTitle} title="Animated Elements" num=${[4]}>
<${OrderedList}>
<${Appear}>
<${ListItem}>Elements can animate in!</${ListItem}>
</${Appear}>
<${Appear}>
<${ListItem}>Out of order</${ListItem}>
</${Appear}>
<${Appear}>
<${ListItem} priority=${0}>Just identify the order with the prop <${CodeSpan}>${`priority`}</${CodeSpan}></${ListItem}>
</${Appear}>
</${OrderedList}>
</${SlideWithTitle}>


<!------ slide (5) begin ------>

<${Slide}>
<${FlexBox}>
<${Text}>These</${Text}>

<${Text}>Text</${Text}>

<${Text} color="secondary">Items</${Text}>

<${Text} fontWeight="bold">Flex</${Text}>
</${FlexBox}>

<${Grid} gridTemplateColumns="1fr 2fr" gridColumnGap=${15}>
<${Box} backgroundColor="primary">
<${Text} color="secondary">Single-size Grid Item</${Text}>
</${Box}>

<${Box} backgroundColor="secondary">
<${Text} color="primary">Double-size Grid Item</${Text}>
</${Box}>
</${Grid}>

<${Grid} gridTemplateColumns="1fr 1fr 1fr" gridTemplateRows="1fr 1fr 1fr" gridRowGap=${1}>
${ renderSomeBoxes(9) }
</${Grid}>
</${Slide}>


<!------ slide (6_1) begin ------>

<${Slide}>
<${Text}>This is a slide fragment.</${Text}>
</${Slide}>


<!------ slide (6_2) begin ------>

<${Slide}>
<${Text}>This is also a slide fragment.</${Text}>

<${Appear}>
<${Text}>This item shows up!</${Text}>
</${Appear}>

<${Appear}>
<${Text}>This item also shows up!</${Text}>
</${Appear}>
</${Slide}>


<!------ slide (7) begin ------>

<${Slide}>

<${CodePane} language='jsx'>
${`
import { createClient, Provider } from 'urql';

const client = createClient({ url: 'https://0ufyz.sse.codesandbox.io' });

const App = () => (
  <Provider value={client}>
    <Todos />
  </Provider>
);

`}
</${CodePane}>

<${Box} height="1em"></${Box}>


<${CodePane} language='java' showLineNumbers=${false}>
${`
public class NoLineNumbers {
    public static void main(String[] args) {
        System.out.println("Hello");
    }
}

`}
</${CodePane}>
</${Slide}>


<!------ slide (8) begin ------>

<${Slide}>
<${Heading}>This is a slide embedded in div.</${Heading}>

<p class="my-warning">This is not implement yet, because i don't understand what this used for.</p>
</${Slide}>


<!------ slide (9) begin ------>

<${Slide}>
<${Text}>Write Slides with markdown?</${Text}>


<${Box} margin="1em 1.5em 5em 1.5em">
<${CodePane} language='markdown' showLineNumbers=${false}>
${`
\`
# This is a Markdown Slide

- You can pass props down to all elements on the slide.
- Just use the \`componentProps\` prop.
\`

`}
</${CodePane}>
</${Box}>

<p class="my-warning">Markdown slides is not supported, I don't think it's necessary.</p>
</${Slide}>


<!------ slide (10) begin ------>

<${Slide}>
<${Grid2x2}><${BoxCenter}>
<${Heading}>This is a 4x4 Grid</${Heading}>
</${BoxCenter}>

<${BoxCenter}>
<${Text} textAlign="center">With all the content aligned and justified center.</${Text}>
</${BoxCenter}>

<${BoxCenter}>
<${Text} textAlign="center">It uses Spectacle <${CodeSpan}>${`<Grid />`}</${CodeSpan}> and <${CodeSpan}>${`<FlexBox />`}</${CodeSpan}> components.</${Text}>
</${BoxCenter}>

<${BoxCenter}>

<${Box} width=${200} height=${200} backgroundColor="secondary" />
</${BoxCenter}>
 </${Grid2x2}></${Slide}>


<!------ slide (11) begin ------>

<${SlideLayout.List} title="Slide layouts" items=${['Two-column', 'Lists' , 'Center', 'And more!']} animateListItems>
</${SlideLayout.List}>


<!------ slide (12) begin ------>

<${SlideLayout.Center}>
<p class="anibox">

<${SpectacleLogo} size=${100} />
</p>
</${SlideLayout.Center}>

</${Deck}>`;

    /* presentation definition finished */

    ReactDOM.createRoot(document.getElementById('root')).render(html`<${Presentation}/>`);

    /* presentation rendered, all finished */

  </script>

</body>
</html>